<template>  
	<div>
		<head-top></head-top>
		<div class="boxWrap">	
			<div class="alert alert-danger text-center" v-if="tipError" style="background-color: #f2dede;">
				<a href="#" class="close" data-dismiss="alert">&times;</a>
				<strong>{{errorReportTip}}</strong>
			</div>
			<div class="reporterWrap" style="padding-bottom:16px;">
				<div class="col-sm-12 report_header">
					<div class="text-left">
						<img src="../../assets/img/visualization.svg" alt="img">						
						<h5>数据预测报告</h5>					
					</div>
				</div>
			</div>
		</div>		
		<div class="col-sm-12 text-left report_words">
			<p class="reporterWrap text-center">					
				数据预测报告包括预测所使用数据的基本统计描述，预测结果的可视化展示。针对不同模型的类型，我们采用了不同组合的定制展示方案。
			</p>
		</div>
		<div class="boxWrap col-sm-12">			
			<div class="reporterWrap">			
				<div class="tableLimited" v-for="all_table_item in all_table">
					<p class="text-left tableName">{{all_table_item.name}}</p>
					<reporter-table :reportType="report_type_val" :idTransfer="id_transfer_val" :nodeId="node_id_val" :table_header="all_table_item.headers" :table_value="all_table_item.values"></reporter-table>
				</div>
				<p class="text-left tableName notShowChart">预测结果</p>
				<div class="col-sm-6 notShowChart" style="padding:0!important;">
					<h4 class="text-center font16">数据散点图</h4>
					<p class="text-center" style="margin:10px 0;">通过X轴、Y轴的下拉框选择不同数据列，可查看选中列数据之间的相关关系。</p>
					<scatter :reportType="report_type_val" :idTransfer="id_transfer_val" :nodeId="node_id_val"></scatter>			
				</div>
				<img :src="imgPath.path" alt="img" v-for="imgPath in imgPaths" class="col-sm-6 resReportImg"/>
			</div>
		</div>
		<footerHtml></footerHtml>
		<!--遮罩层和loading-->
		<div id="mask" v-show="seen" :style="{height: relHeight}"></div>
		<img src="../../assets/img/loading.gif" alt="loading" class="loading_img" v-if="loading"/>
	</div>
   
</template> 

<script>
	//引入公共模块
	import headTop from '@/components/headTop'
	import footerHtml from '@/components/footerHtml'
	import scatter from '@/components/scatter'
	import reporterTable from '@/components/reporterTable'
	import {urlGetReporter} from '../../api/api'
	
	export default {	   
	     data(){
	    	return {
	    		report_type_val:1,
	    		id_transfer_val:this.$route.params.id,
	    		node_id_val:this.$route.params.node,
	    		all_table:[],
	    		imgPaths:'',
	    		seen:false,
    			loading:false,
    			relHeight:'',
    			tipError:false,
    			errorReportTip:'',
	    	}
	    },
	    components:{
	    	headTop,
	    	footerHtml,
	    	scatter,
	    	reporterTable
	    },  
	    beforeCreate:function(){
	    	this.$nextTick(function () {
		      this.seen=true;
		      this.loading=true;
		    })
	    },
	    mounted(){
	    	this.relHeight=`${document.documentElement.scrollHeight}px`;
    		let sendData={
		  		report_type:1,
		  		id:this.$route.params.id,
		  		node_id:this.$route.params.node,
		  		index_x:-1,
		  		index_y:-1
			};
			urlGetReporter(sendData).then(response => {
				this.seen=false;
	    		this.loading=false;
	 			if(response.data.code==200){
	 				// 错误类型(0:没有错误数据 1:有错误数据)
	 				if(response.data.data.invalid_type==1){
	 					$('.notShowChart').hide();
	 					this.tipError=true;
			 			this.errorReportTip=response.data.message;
	 				}
	 				let _self=this;
	 				$(response.data.data.details).each(function(i, v){
		              	$(v.details).each(function(i_son, v_son){
		              		if(v_son.type==0){
								_self.all_table.push(v_son.details);
							}
		              		if(v_son.type==3){
								_self.imgPaths=v_son.details;
							}
			            });
		            });			
	 			}else if(response.data.code==201){    				
	 				console.log('服务器返回数据失败')
	 			}		
	     	}) 
	    },
	    methods:{

		}
      
	}
</script>
<style  lang="css">
	@import "../../assets/css/reporter.css"
</style>